<template>
    <div class="grounding">
        <van-form @submit="onSubmit">
            <van-nav-bar title="绑定货架" left-arrow @click-left="handleLeft">
                <template #right>
                    <van-image :src="saoma" class="menu_cion" @click="saomaClick" />
                </template>
            </van-nav-bar>

            <div class="content">
                <div class="content_title">商品明细</div>
                <div class="conent_pre">
                    <div class="conent_pre_header">
                        <div class="conent_pre_img">
                            <van-image :src="realSrcList + '?x-oss-process=image/resize,w_300'" v-if="realSrcList"
                                @click="enlargeImage(realSrcList)"></van-image>
                            <van-image :src="errImg" v-if="!realSrcList"></van-image>
                        </div>
                        <div class="conent_pre_des">
                            <div class="contnt_title">
                                <div class="contnt_styleName">
                                    {{ detailInfo.styleName }}
                                </div>
                                <div :class="'contnt_status' + detailInfo.shelvesStatus">
                                    {{ shelvesStatusNameByIdss(detailInfo.shelvesStatus) }}
                                </div>
                            </div>
                            <div class="contnt_mechanism">
                                {{ detailInfo.sellingPoints }}
                            </div>
                            <div class="contnt_bottom">
                                <div class="price">￥ {{ mechanismList.price || mechanismList.costPrice }}</div>
                                <div class="commission" v-if='mechanismList?.commission'>佣 {{ (mechanismList.commission
                                    || 0) + "%"
                                    }}</div>
                                <div class="coreName">{{ detailInfo.coreName }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="product_detail_title--content">
                        <div class="product_detail_title-content-info">
                            <div class="product_detail_title-content-info-name">机制：</div>
                            <div class="product_detail_title-content-info-content">
                                {{ detailInfo.liveStreamingMechanism }}
                            </div>
                        </div>
                        <div class="product_detail_title-content-info">
                            <div class="product_detail_title-content-info-name">规格/材质：</div>
                            <div class="product_detail_title-content-info-content">
                                {{ detailInfo.specs }}
                            </div>
                        </div>
                        <div class="product_detail_title-content-info">
                            <div class="product_detail_title-content-info-name">当前库存：</div>
                            <div class="product_detail_title-content-info-content colors">
                                {{ detailInfo.stockInfo?.stockAvailable }}件
                            </div>
                        </div>
                        <div class="product_detail_title-content-info">
                            <div class="product_detail_title-content-info-name">入库时间：</div>
                            <div class="product_detail_title-content-info-content">
                                {{ detailInfo.inStockTime }}
                            </div>
                        </div>
                        <div class="product_detail_title-content-info">
                            <div class="product_detail_title-content-info-name">入库人：</div>
                            <div class="product_detail_title-content-info-content">
                                {{ detailInfo.inOperationName }}
                            </div>
                        </div>
                        <div class="product_detail_title-content-info">
                            <div class="product_detail_title-content-info-name">库存编码：</div>
                            <div class="product_detail_title-content-info-content">
                                {{ detailInfo.stockCode }}
                            </div>
                        </div>
                        <!-- 待上架状态和已下架状态时可操作 -->
                        <div class="product_detail_title-content-info">
                            <van-cell-group inset>
                                <van-field required v-model="locationCode" name="请输入货架号：" label="请输入货架号："
                                    placeholder="请输入" :rules="[{ required: true, message: '请输入货架号' }]" />
                            </van-cell-group>
                        </div>
                    </div>
                </div>
            </div>
            <van-button v-if="buttonFlag && detailInfo.shelvesStatus != 2" :loading="loading" loading-text="执行中..."
                class="buttons" round block type="primary" native-type="submit" v-throttle:click>
                提交
            </van-button>
        </van-form>
    </div>
</template>
<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getSupplierAddProductsById } from "@/api/productList/index";
import { setUpDownShelves, stockLocation } from '@/api/productHome/index'
import { getEnvValue } from "@/utils/index";
import { showFailToast, showImagePreview, showSuccessToast } from "vant";
import { shelvesStatusNameByIdss } from '@/utils/statusNameById'
const router = useRouter()
const saoma = new URL("@/assets/productHome/icon_saoyisao1.png", import.meta.url).href
const errImg = new URL("@/assets/home/error.png", import.meta.url).href;
const route = useRoute();
const detailInfo = ref<any>({});
const realSrcList = ref<string>();
// 按钮回显
const buttonFlag = ref(false)
const locationCode = ref('')
/** 商品id */
const uniquekey = computed(() => {
    return route.query.id;
});
/** 上级路由 */
const fromkey = computed(() => {
    return route.query.from;
});
/** 上级路由 */
const shelvesStatus = computed(() => {
    return route.query.shelvesStatus;
});
/** 上级路由 */
const shelvesStatusName = computed(() => {
    return route.query.shelvesStatusName;
});

const loading = ref(false)
const mechanismList = ref<any>({})


const defaultPhoneHeight = ref(0) //屏幕默认高度
const nowPhoneHeight = ref(0) //屏幕现在的高度
// 在组件挂载完成后添加事件监听器
onMounted(() => {
    defaultPhoneHeight.value = window.innerHeight;
    // 添加事件监听器
    window.addEventListener('resize', handleResize);
})
// 处理窗口大小变化的函数
const handleResize = () => {
    nowPhoneHeight.value = window.innerHeight;
};
// 在组件卸载前移除事件监听器
onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
});
const emits = defineEmits(['doShow'])
watch(nowPhoneHeight, () => {
    if (defaultPhoneHeight.value != nowPhoneHeight.value) {
        // 当软键盘弹出,改变bottomIsSHow变量然后去控制bottom的显示与隐藏
        buttonFlag.value = false
    } else {
        // 相等代表软键盘收起后,与上同理
        buttonFlag.value = true
    }
})

/** 图片放大 */
const enlargeImage = (img: string) => {
    if (img) {
        showImagePreview({
            images: [img],
        });
    }
};
/** 获取详情 */
const getDetail = async () => {
    if (uniquekey.value) {
        const res = await getSupplierAddProductsById({ productId: uniquekey.value });
        detailInfo.value = res.data;
        locationCode.value = detailInfo.value.stockInfo?.locationName
        if (res.data.mechanismList.length) {
            mechanismList.value = res.data.mechanismList[0]
        }
        if (res.data.productImage) {
            const real_src = res.data.productImage.split(",");
            realSrcList.value = getEnvValue("VITE_APP_PIC_URL") + real_src[0]
        }

        // if (detailInfo.value.shelvesStatus == 2 || detailInfo.value.shelvesStatus == 4) {
        //     showFailToast('该商品为' + shelvesStatusNameByIdss(detailInfo.value.shelvesStatus) + ',请选择其他商品重试');
        //     buttonFlag.value = false
        // }else{
        buttonFlag.value = true
        // }
    }
};
getDetail();


/** 扫码 */
const saomaClick = () => {
    (window as any).uni.webView.postMessage({
        data: {
            type: "scanCode",
            name: "goodShelves"
        },
    });
}
/** uniapp端回传扫码数据 */
(window as any).msgFromUniapp = async function (arg) {
    // 货架
    if (arg.name == 'goodShelves') {
        if (typeof arg.productId === 'string') {
            await stockLocation({ name: arg.productId })
            locationCode.value = arg.productId
        } else {
            showFailToast({ message: '货架码错误' });
        }
    }
}
/** 确定上架 */
const onSubmit = async () => {
    loading.value = true
    try {
        await setUpDownShelves({
            stockProductsBoList: [
                {
                    productsId: uniquekey.value,
                    putType: 2, // 2上架 1下架
                    locationCode: locationCode.value,
                    stockCode: detailInfo.value.stockCode
                }
            ]
        })
        loading.value = false
        showSuccessToast('上架成功')
        router.push({
            path: '/listedSuccess',
            query: {
                from: fromkey.value,
                shelvesStatus: shelvesStatus.value,
                shelvesStatusName: shelvesStatusName.value
            }
        })
    } catch (error) {
        if (error == 'timeout') {
            showFailToast('上架失败');
        }
        loading.value = false
    }

}
/** 返回 */
const handleLeft = () => {
    router.back();
}
</script>
<style lang="less" scoped>
.grounding {
    width: 100%;
    height: calc(100vh - 44px);
    background-color: #f6faff;

    :deep(.van-cell-group--inset) {
        margin: 0 !important;
        width: 100% !important;
    }

    :deep(.van-cell) {
        padding: 0 !important;
    }

    :deep(.van-field__label) {
        width: 115px !important;
    }

    :deep(.van-field__control) {
        text-align: right !important;
    }

    .menu_cion {
        width: 19px;
        height: 18px;
    }

    .product_list_serch-text {
        display: flex;
        align-items: center;
        width: 100%;
        background: #f6faff;
        height: 50px;
        position: relative;


        :deep(.van-search__field) {
            background-color: #fff;
            border-radius: 20px;
            padding-left: 60px;
        }

        .product_list_serch1 {
            display: flex;
            align-items: center;
            background: #f6faff;
            width: 100%;
            height: 35px;

            :deep(.van-search__content) {
                height: 35px;
                padding-left: 0 !important;
            }

            :deep(.van-search__field) {
                height: 35px;
            }
        }

        .product_list_code {
            position: absolute;
            left: 10px;
            width: 50px;
            // box-sizing: border-box;
            height: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-right: 1px solid #B8BECA;

            .van-image {
                width: 19px;
                height: 18px;
            }
        }

        .product_list_serch2 {
            position: absolute;
            right: 20px;

            :deep(.van-button__text) {
                font-size: 14px;
            }

            .product_list-btn {
                width: 54px;
                height: 26px;
                font-size: 14px;
                color: #ffffff;
                border: none;
                background: #0094ff;
                white-space: nowrap;
            }
        }
    }

    .content {
        width: 100%;

        .content_title {
            font-weight: 500;
            font-size: 16px;
            color: #1A1B1C;
            margin-left: 15px;
            margin-top: 10px;
        }

        .conent_pre {
            width: 100%;
            padding: 15px;
            box-sizing: border-box;
            background-color: #fff;
            margin-top: 10px;

            .conent_pre_header {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .conent_pre_img {
                    width: 90px;
                    height: 90px;

                    .van-image {
                        width: 90px;
                        height: 90px;

                        :deep(.van-image__img) {
                            border-radius: 5px !important;
                        }
                    }
                }

                .conent_pre_des {
                    width: calc(100% - 90px);
                    height: 90px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    flex-wrap: wrap;
                    padding-left: 10px;
                    align-content: space-around;

                    .contnt_title {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .contnt_styleName {
                            font-weight: 400;
                            font-size: 14px;
                            color: #1A1B1C;
                            width: 150px;
                            height: 20px;
                            white-space: nowrap;
                            /* 确保文本在一行内显示 */
                            overflow: hidden;
                            /* 隐藏溢出的内容 */
                            text-overflow: ellipsis;
                        }

                        .contnt_status1 {
                            width: 67px;
                            height: 26px;
                            background: #EBF4FF;
                            border-radius: 2px;
                            font-weight: 400;
                            font-size: 14px;
                            color: #0094FF;
                            text-align: center;
                            line-height: 26px;
                        }

                        .contnt_status2 {
                            width: 67px;
                            height: 26px;
                            background: #E7FDEE;
                            border-radius: 2px;
                            font-weight: 400;
                            font-size: 14px;
                            color: #19D11B;
                            text-align: center;
                            line-height: 26px;
                        }

                        .contnt_status3 {
                            width: 67px;
                            height: 26px;
                            background: #FDE7E7;
                            border-radius: 2px;
                            font-weight: 400;
                            font-size: 14px;
                            color: #FC2540;
                            text-align: center;
                            line-height: 26px;
                        }

                        .contnt_status4 {
                            width: 67px;
                            height: 26px;
                            background: #EBF4FF;
                            border-radius: 2px;
                            font-weight: 400;
                            font-size: 14px;
                            color: #0094FF;
                            text-align: center;
                            line-height: 26px;
                        }

                    }

                    .contnt_mechanism {
                        width: 100%;
                        font-weight: 400;
                        font-size: 12px;
                        color: #B8BECA;
                        white-space: nowrap;
                        /* 确保文本在一行内显示 */
                        overflow: hidden;
                        /* 隐藏溢出的内容 */
                        text-overflow: ellipsis;
                    }

                    .contnt_bottom {
                        width: 100%;
                        height: 20px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .price {
                            font-weight: 500;
                            font-size: 14px;
                            color: #FC2540;
                        }

                        .commission {
                            font-weight: 500;
                            font-size: 14px;
                            color: #FC2540;
                        }

                        .coreName {
                            font-weight: 400;
                            font-size: 12px;
                            color: #0094FF;
                        }
                    }
                }
            }

            .product_detail_title-content-info {
                margin-top: 20px;
                display: flex;

                .product_detail_title-content-info-name {
                    font-weight: 400;
                    font-size: 14px;
                    color: #1a1b1c;
                    line-height: 14px;
                    width: 100px;
                }

                .colors {
                    color: #0094FF !important;
                }

                .product_detail_title-content-info-content {
                    flex: 1;
                    min-width: 0;
                    font-weight: 400;
                    font-size: 14px;
                    color: #b8beca;
                    line-height: 14px;
                    margin-left: auto;
                    display: flex;
                    justify-content: flex-end;
                    word-break: break-all;
                }
            }

        }
    }

    .buttons {
        width: 345px;
        height: 44px;
        background: #0094FF;
        border-radius: 23px;
        text-align: center;
        line-height: 44px;
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
        margin: auto;
        position: fixed;

        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
    }
}
</style>